<template>
<div class="landValue">
    <zlc-chat :option="whtjOption" id="whtj"></zlc-chat>
</div>
</template>

<script>
import { reactive } from "vue"
import zlcChat from "../../../components/zlcChat/zlcChat.vue";

export default {
    name: "landValue",
    components: {zlcChat},
    setup(){
        //信访维护统计echartsOption
        let whtjOption = reactive({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel:{
                    textStyle:{
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#2D90FF',     // 设置轴线颜色为红色
                        width: 1,          // 设置轴线宽度为2像素
                        type: 'solid',    // 设置轴线为虚线
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    textStyle:{
                        color: '#fff'
                    }
                },
                splitLine:{
                    lineStyle: {
                        color: '#B2C2D3',     // 设置网格线颜色为红色
                        width: 1,          // 设置网格线宽度为1像素
                        type: 'dashed',    // 设置网格线为虚线
                    }
                }
            },
            legend:{
                type: "plain",
                left: 'center',
                show: true,
                top: 15,
                icon: 'rect',
                itemWidth: 15,
                itemHeight: 8,
                textStyle: {
                    color: "#fff",
                    rich: {
                        a: {
                            verticalAlign: "middle"
                        }
                    },
                    padding: [0, 5, -2, 0]
                }
            },
            grid:{
                left: 30,
                right: 0,
                top: 55,
                bottom: 20,
                borderColor: 'red'
            },
            series: [
                {
                    name: '信访事件',
                    data: [8, 10, 30, 60, 48, 40, 36, 20, 10],
                    type: 'line',
                    symbol: 'none',
                    icon: 'rect',
                    areaStyle: {
                        color: {
                            type: 'linear', // 指定渐变类型为线性渐变
                            x: 0,            // 渐变起点的 x 坐标
                            y: 0,            // 渐变起点的 y 坐标
                            x2: 0,           // 渐变终点的 x 坐标
                            y2: 0.6,           // 渐变终点的 y 坐标
                            y3: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(0, 128, 255, 1)' },   // 起始颜色
                                { offset: 0.6, color: 'rgba(0, 128, 255, 0.5)' }, // 结束颜色
                                { offset: 1, color: 'rgba(0, 128, 255, 0)' }, // 结束颜色
                            ],
                        },
                    }
                },
                {
                    name: '基地维护',
                    data: [2, 7, 10, 12, 11, 10, 26, 10, 30],
                    type: 'line',
                    symbol: 'none',
                    areaStyle: {
                        color: {
                            type: 'linear', // 指定渐变类型为线性渐变
                            x: 0,            // 渐变起点的 x 坐标
                            y: 0,            // 渐变起点的 y 坐标
                            x2: 0,           // 渐变终点的 x 坐标
                            y2: 1,           // 渐变终点的 y 坐标
                            colorStops: [
                                { offset: 0, color: 'rgba(128, 185, 93, 1)' },   // 起始颜色
                                { offset: 1, color: 'rgba(128, 185, 93, 0)' }, // 结束颜色
                            ],
                        },
                    }
                }
            ]
        })
        return {
            whtjOption
        }
    }
}
</script>

<style scoped lang="less">
.landValue{
  width: 100%;
  height: 100%;
}
</style>
